<template>
  <div>
    <h1>Router</h1>
    <div class="router-link">
      <!-- router-link添加replace属性不会留下历史记录 -->
      <!-- <router-link class="router-link-item" to="/">Login</router-link>
      <router-link class="router-link-item" to="/reg">Reg</router-link> -->


      <!-- <router-link class="router-link-item" :to="{ name: 'Login' }">Login</router-link>
      <router-link class="router-link-item" :to="{ name: 'Register' }">Reg</router-link> -->

      <button @click="toPage('login')">Login</button>
      <button @click="toPage('register')">Register</button>
      <button @click="toPage('Commodity')">Commodity</button>
      <!-- <button @click="toPage('Commodity Detail')">Commodity Detail</button> -->
    </div>
    <hr>

    <RouterView #default="{ route, Component }">
      <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
        <div :key="route.path">
          <component :is="Component"></component>
        </div>
      </transition>
    </RouterView>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (flag: string) => {
  // 编程时导航可以把push改成replace，不会留下历史记录
  let url = ''
  switch (flag) {
    case 'login':
      url = '/'
      break
    case 'register':
      url = '/reg'
      break
    case 'Commodity':
      url = '/commodity'
      break
    case 'Commodity Detail':
      url = '/commodity-detail'
      break
    default:
      url = ''
  }
  router.push(url)
}

// 历史记录前进
const next = () => {
  router.forward()
}

// 历史记录后退
const prev = () => {
  router.back()
}
</script>

<style scoped>
.router-link {
  font-size: 0;
}

.router-link-item {
  display: inline-block;
  padding: 10px;
  font-size: 14px;
}

button {
  font-size: 12px;
}
</style>
